<template>
  <van-empty v-if="news.length == 0" description="没有数据"> </van-empty>
  <div v-else>
    <ul class="news">
      <li
        v-for="item in news"
        :key="item.id"
        @click="onClick(item.id)"
        :class="item.image_url ? 'list list-right-img' : 'list list-no-img'"
      >
        <template v-if="item.image_url">
          <div class="left">
            <div class="new">
              <p class="title list-ellipsis-1">
                {{ item.title }}
              </p>
              <p class="content">
                {{ item.body }}
              </p>
            </div>
            <span class="time">{{ item.created }}</span>
          </div>
          <div class="right">
            <img :src="item.image_url" alt="" />
          </div>
        </template>
        <template v-else>
          <div class="top">
            <div class="title list-ellipsis-2">{{ item.title }}</div>
            <p class="content">
              {{ item.body }}
            </p>
          </div>
          <div class="info">
            <span>{{ item.created }}</span>
          </div>
        </template>
      </li>
    </ul>
    <van-button
      style="margin-top: 7px !important"
      plain
      hairline
      type="primary"
      size="large"
      @click="loadMore"
      >加载更多</van-button
    >
  </div>
</template>

<script lang="ts">
import { reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

export default {
  name: "NewList",
  props: {
    news: {
      type: Array,
      default: false,
    },
    loadMore: {
      type: Function,
      default: () => {},
    },
  },
  setup(props: any) {
    const router = useRouter();
    let data = reactive({
      onClick: (id: number) => {
        router.push({ path: "/newinfo", query: { id } });
      },
    });

    return {
      ...toRefs(data),
    };
  },
};
</script>

<style lang="less" scoped>
/* 新闻 */
.list-con {
  padding: 0 10px;
}
.news {
  background: #fff;
}

.time {
  margin-top: 7px !important;
}
.news .list {
  display: flex;
  display: -webkit-flex;
  padding: 10px 5px 5px;
  margin: 0 15px;
  border-bottom: 1px solid #ddd;
}

.news .list:last-child {
  border: 0;
}

/* 无图纯文字模式 */
.list-no-img {
  flex-direction: column;
}
.list-no-img .top .title {
  font-weight: bold;
  height: 30%;
  font-size: 14px;
}
.list-no-img .top .content {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  line-height: 20px;
  font-size: 14px;
  margin-bottom: 5px;
  color: #666;
  margin: 5px 0;
}

.list-no-img .info {
  font-size: 10px;
  color: #bbb;
  display: flex;
}
.list-no-img .info .info-r-5 {
  margin-right: 5px;
}
.list-no-img .info .list-ellipsis-1 {
  max-width: 40%;
}

/* 无图纯文字模式结束 */

/* 右图模式 */
.title {
  margin: 0 !important;
}
.list-right-img .left {
  width: 60%;
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  justify-content: space-between;
}

.list-right-img .left .title {
  font-weight: bold;
  height: 30%;
  font-size: 14px;
}

.list-right-img .left .content {
  font-size: 12px;
  color: #888;
  margin: 5px 0;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-height: 16px;
}

.list-right-img .left .time {
  font-size: 10px;
  color: #bbb;
}

.list-right-img .right {
  width: 40%;
  margin-left: 10px;
}

.list-right-img .right img {
  width: 100%;
  height: 90px;
}

/* 右图模式结束 */

/* 其他 */

/* 单行省略 */
.list-ellipsis-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 两行省略 */
.list-ellipsis-2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  word-break: break-all;
  white-space: normal !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>